<template>
<div>
  <div
    style="margin: 10px 0; font-size: 24px;padding: 0px; border-bottom: 1px solid #ccc; height: 120px; text-align: center;">
    关于我的评论</div>
 <el-badge :value="pageInfo.total" class="item">
   <el-button size="big" @click="commentshowup">我发表的朋友圈</el-button>
 </el-badge>

 <el-badge :value="pageInfo1.total" class="item">
   <el-button size="big" @click="commentedshowup">我回复过的朋友圈</el-button>
 </el-badge>
 <!-- --------------------------------------我的评论 -->
 <div v-show="commentshow" style="width: 1000px; margin: 0 auto; line-height: 160px;">
     <!-- 评论展示区 -->
     <div style=" margin:20px 0 ;">
       <div style="margin: 20px 0; text-align: left;">
         <div style="padding:10px 0; line-height: 20px;" v-for="item in pageInfo.list">
           <div style="display: flex;">
             <div style="width: 80px; ">
               <el-avatar :size="50" :src="item.avatarUrl">
               </el-avatar>
             </div>
             <div style="flex: 1;">
               <div style="font-weight: bolder;">{{item.username}}</div>
               <!-- 展示发表的图片 -->
               <!-- <div>{{item.imgUrl}}</div> -->
               <el-image v-if="item.imgUrl!=null" style="width: 100px; height: 100px" :src="item.imgUrl" ></el-image>

               <div style="margin-top: 10px; color: #666;">{{item.content}}</div>
             </div>
           </div>
           <!-- 多级评论 -->
           <div style="text-align: right; padding: 10px;">
             <div>
               <!-- 删除按钮 -->
               <i class="el-icon-delete-solid" @click="deleteComment(item.cid)"></i>

             </div>
 <!-- <img src="https://gulixueyuan001.oss-cn-beijing.aliyuncs.com/2022/11/29/345571f80cf7471488c0aa6d5d00d715v2-cf02dc2306749a4776858ff71df23fd3_r.jpg"/> -->
           </div>

           <!-- 子评论的展示 -->
           <div v-if="item.children"
             style="margin-left: 50px; background-color: aquamarine; padding: 10px; border-radius: 10px;">

             <div v-for="sub in item.children" :key="sub.id">
               <div style="padding: 10px 0;">

                 <b @click="reply(sub.pid,sub.username)">{{sub.username}}</b><span>回复<span
                     style="color:blue">@{{sub.target}}:</span>
                   <span>{{sub.content}}</span></span>
                 <i style="text-align: right;" class="el-icon-delete-solid" @click="deleteComment(sub.cid)"></i>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
     <!-- 分页 -->
     <div class="block" style="margin-top: 20px;margin-left: -200px;">
       <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
         :current-page="pageInfo.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="pageInfo.pageSize"
         layout="total, sizes, prev, pager, next, jumper" :total="this.pageInfo.total">
       </el-pagination>
     </div>

     <!-- 点击回复框出现的弹框 -->
     <el-dialog title="回复" :visible.sync="dialogFormVisible" style="line-height: 50px;">
       <el-form :model="replyComment">
         <el-form-item label="回复信息">
           <el-input v-model="replyComment.content" autocomplete="off" style="width: 80%;"></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible = false">取 消</el-button>
         <el-button type="primary" @click="saveReply">确 定</el-button>
       </div>
     </el-dialog>
   </div>


    <!-- --------------------------------------评论我的 -->

   <div v-show="commentedshow" style="width: 1000px; margin: 0 auto; line-height: 160px;">
     <div v-show="markedwords">
       您还没有对任何一条朋友圈发表过您的评论哦
     </div>
       <!-- 评论展示区 -->
       <div style=" margin:20px 0 ;">
         <div style="margin: 20px 0; text-align: left;">

           <div style="padding:10px 0; line-height: 20px;" v-for="item in pageInfo1.list">

             <div style="display: flex;">
               <div style="width: 80px; ">
                 <el-avatar :size="50" :src="item.avatarUrl">
                 </el-avatar>
               </div>
               <div style="flex: 1;">
                 <div style="font-weight: bolder;">{{item.username}}</div>
   <!-- 展示发表的图片 -->
                 <!-- <div>{{item.imgUrl}}</div> -->
                 <el-image v-if="item.imgUrl!=null" style="width: 100px; height: 100px" :src="item.imgUrl" ></el-image>

                 <div style="margin-top: 10px; color: #666;">{{item.content}}</div>
               </div>
             </div>
             <!-- 多级评论 -->
             <div style="text-align: right; padding: 10px;">
               <!-- 操作按钮，如果已经点赞过，显示取消点赞，否则显示点赞 -->
               <div>
                 <!-- 删除按钮 -->
                 <i class="el-icon-delete-solid" @click="deleteComment(item.cid)"></i>

               </div>
   <!-- <img src="https://gulixueyuan001.oss-cn-beijing.aliyuncs.com/2022/11/29/345571f80cf7471488c0aa6d5d00d715v2-cf02dc2306749a4776858ff71df23fd3_r.jpg"/> -->
             </div>

             <!-- 子评论的展示 -->
             <div v-if="item.children"
               style="margin-left: 50px; background-color: aquamarine; padding: 10px; border-radius: 10px;">

               <div v-for="sub in item.children" :key="sub.id">
                 <div style="padding: 10px 0;">

                   <b @click="reply(sub.pid,sub.username)">{{sub.username}}</b><span>回复<span
                       style="color:blue">@{{sub.target}}:</span>
                     <span>{{sub.content}}</span></span>
                   <i style="text-align: right;" class="el-icon-delete-solid" @click="deleteComment(sub.cid)"></i>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
       <!-- 分页 -->
       <div class="block" style="margin-top: 20px;margin-left: -200px;">
         <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
           :current-page="pageInfo1.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="pageInfo1.pageSize"
           layout="total, sizes, prev, pager, next, jumper" :total="this.pageInfo1.total">
         </el-pagination>
       </div>

       <!-- 点击回复框出现的弹框 -->
       <el-dialog title="回复" :visible.sync="dialogFormVisible" style="line-height: 50px;">
         <el-form :model="replyComment">
           <el-form-item label="回复信息">
             <el-input v-model="replyComment.content" autocomplete="off" style="width: 80%;"></el-input>
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
           <el-button @click="dialogFormVisible = false">取 消</el-button>
           <el-button type="primary" @click="saveReply">确 定</el-button>
         </div>
       </el-dialog>
     </div>
</div>



</template>

<script>
import badWordArray from "../badWord.js";
 export default {
    data() {
      return {
        markedwords:false,
        commentshow:true,
        commentedshow:false,
        badWordArray: [],
        currentPage: 1,
        pageSize: 10,
        dialogImageUrl: '',
        pageInfo: {
          ok: false,
        },
        pageInfo1:{},
        dialogVisible: false,
        file: null,
        dialogFormVisible: false,
        comment: {
          content: '',

        },
        replyComment: {
          content: ''
        },
        userinfo: {},
        headUrl: "",
        imageUrl:'',
      }
    },
    created() {
      this.user = JSON.parse(sessionStorage.getItem("user"))
      this.load()
      this.loadChildren()
    },
    methods: {
      commentshowup(){
        this.commentshow=true,
        this.commentedshow=false,
        this.load()
      },
      commentedshowup(){
        this.commentshow=false,
        this.commentedshow=true,
        this.loadChildren()
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.load();
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.load();
        console.log(`当前页: ${val}`);
      },
      // 删除评论，包括子评论
      deleteComment(cid) {
        // console.log(cid)
        this.$axios.delete("http://localhost:8080/comment/" + cid).then(res => {
          this.$notify.success("删除成功")
          this.load();
        })

      },

      // 回复
      reply(pid, target) {
        this.replyComment = {
          pid: pid,
          username: this.user.username,
          target: target,
        }
        this.dialogFormVisible = true;
      },
      saveReply() {
        this.$axios({
          method: "post",
          url: "http://localhost:8080/comment",
          data: JSON.stringify(this.replyComment),
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          }
        }).then(res => {
          this.$notify.success("成功")
          this.load();
          this.replyComment.content = '';
        })
        this.dialogFormVisible = false;
      },

      // 遍历所有的评论
      load() {
        this.$axios.get("http://localhost:8080/comment/" + this.currentPage + "/" + this.pageSize+"/"+this.user.username).then(res => {
          this.pageInfo = res.data.data;
          this.currentPage = this.pageInfo.pageNum;
          this.pageSize = this.pageInfo.pageSize;
          console.log(res.data.data)
        })
      },
      loadChildren() {
        this.$axios.get("http://localhost:8080/comment/1/" + this.currentPage + "/" + this.pageSize+"/"+this.user.username).then(res => {
          this.pageInfo1 = res.data.data;
          console.log(res.data.data.list.length)
          console.log(res.data.data)
          this.currentPage = this.pageInfo1.pageNum;
          this.pageSize = this.pageInfo1.pageSize;
          if(res.data.data.list.length==0){
            this.markedwords=true
          }
        })
      },
    }
  }

</script>

<style>
.item {
  margin-top: 10px;
  margin-right: 40px;
}
</style>
